import { useState } from "react";
import ToDoList from "./ToDoList";
import { code } from "./codeData";
import CodeBlock from "../../../component/CodeBlock";

function StateTest() {
    const [count, setCount] = useState(0);
    return (<div className="tab-pane">
        <h1>State</h1>

        你点击了 {count} 次。
        <button className='mainButton' onClick={() => setCount(count + 1)}>点击</button>
        <p>State是组件内部的数据，当state发生变化时，组件会重新渲染。在函数组件中，我们使用useState Hook来管理状态。</p>

        <h3>使用useState Hook</h3>
        <CodeBlock code={code.state1}></CodeBlock>

        <h3>更新State</h3>
        <p>更新state时，应该使用setState函数，而不是直接修改state。</p>
        <CodeBlock code={code.state2}></CodeBlock>
        <h3>多个State变量</h3>
        <p>可以在一个组件中使用多个state变量。</p>
        <CodeBlock code={code.state3}></CodeBlock>
        <ToDoList></ToDoList>
    </div>);
}

export default StateTest;